<template>
  <view class="content">
    <u-form class="form" :model="leave" ref="uForm">
      <u-form-item prop="leaveTime" class="inputWrapper">
        <view>离开时间</view>
        <u-datetime-picker
          :show="leaveTimeShow"
          mode="datetime"
          @confirm = "leaveConfirm"
          @cancel = "leaveCancel"
        ></u-datetime-picker>
        <view @click="leaveTimeShow = !leaveTimeShow">
          {{leave.leaveTime}}
        </view>
      </u-form-item>
      <u-form-item prop="backTime" class="inputWrapper">
        <view>返回时间</view>
        <u-datetime-picker
          :show="backTimeShow"
          mode="datetime"
          @confirm = "backConfirm"
          @cancel = "backCancel"
        ></u-datetime-picker>
        <view @click="backTimeShow = !backTimeShow">
          {{leave.backTime}}
        </view>
      </u-form-item>
      <view class="loginBtn">
         <view class="btnValue" @click="handleAdd">提交请假</view>
      </view>
    </u-form>
  </view>
</template>

<script>
import api from '@/api/student/api.js'
export default {
  data() {
    return {
      leaveTimeShow: false,
      backTimeShow: false,
      leave: {
        studentId: '',  // 学生id
        courseId: '',   // 课程id
        leaveTime: uni.$u.timeFormat(
            Number(new Date()),
            'yyyy-mm-dd h:M:s'
          ),  // 请假时间
        backTime: uni.$u.timeFormat(
            Number(new Date()),
            'yyyy-mm-dd h:M:s'
          ),   // 返回时间
        leaveReason: 0, // 正在审批
      },
    }
  },
  onLoad(option) {
    this.leave.studentId = option.studentId
    this.leave.courseId = option.courseId
  },
  methods: {
    leaveConfirm(e) {
      this.leave.leaveTime = uni.$u.timeFormat(
          e.value,
          'yyyy-mm-dd h:M:s'
        )
      this.leaveTimeShow = !this.leaveTimeShow
    },
    leaveCancel() {
      this.leaveTimeShow = !this.leaveTimeShow
    },
    backConfirm(e) {
      this.leave.backTime = uni.$u.timeFormat(
          e.value,
          'yyyy-mm-dd h:M:s'
        )
      this.backTimeShow = !this.backTimeShow
    },
    backCancel() {
      this.backTimeShow = !this.backTimeShow
    },
    handleLoad(url, parme) {
      this.$http
        .getMethod(api[url], parme)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
            uni.navigateTo({
              url:
                '/pages/student/detailed/detailed?id=' +
                this.leave.courseId +
                '&studentId=' +
                this.leave.studentId
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleAdd() {
      let parme = this.leave
      this.handleLoad('addLeave', parme)
    }
  },
}
</script>

<style scoped lang="less">
.content {
  width: 95vw;
  height: 95vh;
  padding: 20upx;
  position: relative;
  .title-item {
    display: flex;
    margin-bottom: 20upx;
    .title-name {
      flex: 1;
      text-align: center;
      font-size: 40upx;
    }
    .title-caidan {
      width: 60upx;
      height: 40upx;
      image {
        width: 40upx;
        height: 40upx;
      }
    }
  }

  .arrivalNavigation {
    width: 250rpx;
    position: absolute;
    right: 20rpx;
    z-index: 99;
    .sideNavigation {
      width: 248rpx;
      background-color: #202020;
      color: #eee;
      border-radius: 10rpx;

      li {
        list-style-type: none;
        height: 85rpx;
        text-align: center;
        line-height: 85rpx;
        font-size: 25rpx;
      }
      .liBottomBorder {
        border: 0.1rpx solid #373737;
      }
    }
    .d4 {
      // position: absolute;
      //  	left: 140rpx;
      width: 0;
      height: 0;
      margin-left: 150rpx;
      margin-top: -20rpx;
      border-width: 20rpx;
      border-style: solid;
      border-color: transparent #333 transparent transparent;
      transform: rotate(90deg); /*顺时针旋转90°*/
    }
  }
}

.attend-item {
  display: flex;
  padding: 25upx;
  border: 1upx solid rgba(217, 217, 217, 1);
  border-radius: 20upx;
  margin-bottom: 20upx;
  margin-top: 20upx;
  .attend-item-name {
    flex: 1;
  }
  .attend-item-state {
    width: 20%;
    padding: 25upx;
    border-left: 1upx solid rgba(217, 217, 217, 1);
    text-align: center;
    line-height: 60upx;
  }
}

.student-item {
  display: flex;
  padding: 25upx;
  border: 1upx solid rgba(217, 217, 217, 1);
  border-radius: 20upx;
  margin-bottom: 20upx;
  margin-top: 20upx;
  .student-item-name {
    flex: 1;
  }
  .student-item-state {
    width: 20%;
    padding: 25upx;
    border-left: 1upx solid rgba(217, 217, 217, 1);
    text-align: center;
    line-height: 60upx;
  }
}

.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  .btnValue {
    color: white;
  }
}
</style>
